﻿@page "/progressbar"

<PageTitle Title="进度条(BootProgressBar)">
    进度条带给用户一种对于操作中的时间反馈。
</PageTitle>
<PresentationPart Title="不同主题">

    <Description>
        设置 <code>Color</code> 属性使用不同的主题颜色。并设置 <code>Value</code> 来定义进度条的值，宽度会自动计算。
    </Description>
    <RunTemplate>
        <BootProgressBar Value="80" Color="Color.Primary" />
        <div class="mt-1"></div>
        <BootProgressBar Value="65" Color="Color.Secondary" />
        <div class="mt-1"></div>
        <BootProgressBar Value="30" Color="Color.Info" />
        <div class="mt-1"></div>
        <BootProgressBar Value="77" Color="Color.Warning" />
        <div class="mt-1"></div>
        <BootProgressBar Value="100" Color="Color.Success" />
        <div class="mt-1"></div>
        <BootProgressBar Value="40" Color="Color.Danger" />
        <div class="mt-1"></div>
        <BootProgressBar Value="92" Color="Color.Light" />
        <div class="mt-1"></div>
        <BootProgressBar Value="50" Color="Color.Dark" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootProgressBar Value=""80"" Color=""Color.Primary"" />
<BootProgressBar Value=""65"" Color=""Color.Secondary"" />
<BootProgressBar Value=""30"" Color=""Color.Info"" />
<BootProgressBar Value=""77"" Color=""Color.Warning"" />
<BootProgressBar Value=""100"" Color=""Color.Success"" />
<BootProgressBar Value=""40"" Color=""Color.Danger"" />
<BootProgressBar Value=""92"" Color=""Color.Light"" />
<BootProgressBar Value=""50"" Color=""Color.Dark"" />
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="自定义内容">
    <Description>
        可以在控件之间插入任何要呈现的其他内容
    </Description>
    <RunTemplate>
        <BootProgressBar Value="90" Color="Color.Info">
            自定义文本
        </BootProgressBar>
        <div class="mt-1"></div>
        <BootProgressBar Value="60" Color="Color.Success">
            <BootButton Color="Color.Warning">带按钮的进度条</BootButton>
        </BootProgressBar>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootProgressBar Value=""90"" Color=""Color.Info"">
    自定义文本
</BootProgressBar>
<BootProgressBar Value=""60"" Color=""Color.Success"">
     <BootButton Color=""Color.Warning"">带按钮的进度条</BootButton>
</BootProgressBar>
```
        ")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="花纹样式">
    <Description>
        设置 <code>Striped=true</code> 呈现花纹样式的进度条。
    </Description>
    <RunTemplate>
        <BootProgressBar Value="90" Striped="true"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootProgressBar Value=""90"" Striped=""true""/>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="设置高度">
    <Description>
        设置 <code>Height</code> 可以自定义进度条的高度，单位是 px。
    </Description>
    <RunTemplate>        
        <BootProgressBar Height="5" Value="90" Color="Color.Info" />
        <br />
        <BootProgressBar Height="30" Value="70" Color="Color.Success" />
        <br />
        <BootProgressBar Height="50" Value="40" Color="Color.Danger" />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootProgressBar Height=""5"" Value=""90"" Color=""Color.Info"" />
<BootProgressBar Height=""30"" Value=""70"" Color=""Color.Success"" />
<BootProgressBar Height=""50"" Value=""40"" Color=""Color.Danger"" />
```
        ")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="自定义模板">
    <Description>
        使用 <code>Template</code> 组件定义进度条中要显示的内容，可以用 <code>context</code> 变量获取当前进度条对象。
    </Description>
    <RunTemplate>
        <BootProgressBar Value="95" Color="Color.Danger">
            <Template>
                @(context.Percentage)%
            </Template>
        </BootProgressBar>
        <div class=" mt-1"></div>
        <BootProgressBar Value="60" Color="Color.Primary">
            <Template>
                @(context.Value)/@(context.Max)
            </Template>
        </BootProgressBar>
        <br />
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html

<BootProgressBar Value=""95"" Color=""Color.Danger"">
    <Template>
        @(context.Percentage)%
    </Template>
</BootProgressBar>
<BootProgressBar Value=""60"" Color=""Color.Primary"">
    <Template>
        @(context.Value)/@(context.Max)
    </Template>
</BootProgressBar>
```
        ")
    </CodeTemplate>
</PresentationPart>
<ArgumentDescriptionTable Title="属性">
    <tr>
        <td>Color</td>
        <td>Color</td>
        <td>置进度条的主题颜色。默认是 <code>Primary</code></td>
    </tr>
    <tr>
        <td>Max</td>
        <td>Decimal</td>
        <td>设置进度条的最大值，默认是 100。</td>
    </tr>
    <tr>
        <td>Min</td>
        <td>Decimal</td>
        <td>设置进度条的最小值，默认是 0，不能小于 0。</td>
    </tr>
    <tr>
        <td>Value</td>
        <td>Decimal</td>
        <td>设置进度条当前的值，必须在 <code>Min</code> 和 <code>Max</code> 之间。</td>
    </tr>
    <tr>
        <td>Template</td>
        <td>RenderFragment&lt;BootProgressBar></td>
        <td>设置进度条自定义模板。</td>
    </tr>
    <tr>
        <td>Striped</td>
        <td>Boolean</td>
        <td>设置一个布尔值，表示进度条是否呈现花纹状。</td>
    </tr>
    <tr>
        <td>Height</td>
        <td>Int?</td>
        <td>设置进度条的高度。单位是px。</td>
    </tr>
    <tr>
        <td>Percentage</td>
        <td>Decimal</td>
        <td>获取进度条的百分比。</td>
    </tr>
</ArgumentDescriptionTable>
